<template>
    <!-- 订单详情弹框组件 -->
    <Dialog :title="dialogConfig.title" :buttons="dialogConfig.buttons" :show="dialogConfig.show"
        @close="dialogConfig.show = false" :width="'700px'">
        <!-- 选择地址信息 -->
        <el-select v-model="addressId" placeholder="请选择收货地址" v-if="showSelect">
            <el-option v-for="item in addresses" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <div v-else>{{ addressStr }}</div>
        <br><br>
        <!-- 订单中的商品信息 -->
        <div v-for="(item, index) in itemList" :key="index">
            [{{ index + 1 }}] {{ item.name }} : {{ item.price / 100 }} x {{ item.num }} = {{ item.price * item.num / 100
            }} 元
        </div>
        <br>
        <!-- 订单总价 -->
        <div style="color: red">总价：{{ totalPrice / 100 }} 元</div>
    </Dialog>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const addressId = ref(null)
const addresses = ref([])
const addressStr = ref("")

const dialogConfig = reactive({
    show: false,
    title: "订单信息",
    buttons: [
        {
            type: "primary",
            text: "确认",
            click: (e) => {
                if (showSelect.value) {
                    submitData();
                }
                dialogConfig.show = false;
            },
        },
    ],
});

const itemList = ref([])
const emit = defineEmits(["reload"])

const submitData = async () => {
    if (!addressId.value) {
        proxy.Message.error("请选择收货地址");
        return;
    }
    let result = await proxy.Request({
        dataType: 'json',
        method: 'post',
        url: proxy.Api.createOrder,
        params: {
            addressId: addressId.value,
            details: itemList.value,
        }
    })
    if (!result) {
        return;
    }
    proxy.Message.success("创建订单成功");
    emit("reload");
}

const totalPrice = ref(0)

const showSelect = ref(true);

const show = async ({ details, address }) => {
    // 获取地址信息
    if (address) {
        showSelect.value = false;
        // 使用传进来的地址信息，只读展示
        addressStr.value = "联系人：" + address.contact + "    手机：" + address.mobile + "    " + address.province + "省" + address.city + "市" + address.town + "区" + address.street
    }
    else {
        showSelect.value = true;
        // 发送请求获取地址信息
        let result = await proxy.Request({
            url: proxy.Api.queryMyAddresses,
        })
        if (!result) {
            return;
        }
        if (result.data && result.data.length == 0) {
            proxy.Message.error("请先添加收货地址");
            return;
        }
        addresses.value = result.data.map((item) => {
            return {
                value: item.id,
                label: "联系人：" + item.contact + "    手机：" + item.mobile + "    " + item.province + "省" + item.city + "市" + item.town + "区" + item.street,
                isDefault: item.isDefault
            }
        })
        addresses.value.forEach((item) => {
            if (item.isDefault && item.isDefault == 1) {
                // 有默认地址就选择默认地址
                addressId.value = item.value;
                proxy.Message.success("已为您选择默认地址");
            }
        })
    }
    // 展示商品信息
    itemList.value = details;
    // 计算总价
    totalPrice.value = 0;
    itemList.value.forEach((item) => {
        totalPrice.value += item.price * item.num;
    })
    dialogConfig.show = true
}
defineExpose({
    show,
});

</script>

<style lang="scss" scoped></style>
